<template functional>
  <div class="section-title">
    <div class="section-title__text">
      <i class="section-title__line"></i><b>{{ props.en }}</b
      ><span class="text">{{ props.title }}</span
      ><i class="section-title__line"></i>
    </div>
    <div class="section-title__meta">{{ props.meta }}</div>
  </div>
</template>

<script>
export default {
  props: {
    en: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    meta: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.section-title {
  text-align: center;
  line-height: 1;
  padding: 32px 0;

  &__text {
    font-size: 0;
    font-weight: bold;
    color: #226eff;
    vertical-align: middle;
    line-height: 1;
    margin-bottom: 9px;
    position: relative;
    b {
      vertical-align: middle;
      display: inline-block;
      font-size: 34px;
      margin-right: 8px;
      font-weight: 400;
      color: #222222;
    }
    .text {
      vertical-align: middle;
      display: inline-block;
      font-size: 34px;
    }
  }
  &__line {
    vertical-align: middle;
    display: inline-block;
    width: 110px;
    height: 2px;
    background-color: #ccc;
    margin: 0 20px;
  }
  &__meta {
    font-size: 16px;
    font-weight: 400;
    color: #959595;
  }
}
</style>
